<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link href="css/bootstrap.css" rel="stylesheet">
		<link href="css/layui.css" rel="stylesheet">
		<link href="css/laydate.css" rel="stylesheet">
		<link href="css/layui.mobile.css" rel="stylesheet">
		<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/styles.css">
		<title>学习任务-大学课堂评价系统</title>

		<style>
			.cate-row{font-size: 16px;margin: 20px 0}
			        .category{margin: 0 5px;text-decoration:none;padding: 4px 10px;color: #666;border-radius: 15px;
			            transition: background 0.5s, color 0.5s;
			            -webkit-transition: background 0.5s, color 0.5s;
			        }
			        .category.active{text-decoration:none;cursor: pointer;color: #fff;background-color: #009688;border-radius: 15px;}
			        .category:hover{text-decoration:none;cursor: pointer;color: #fff;background-color: #009688;border-radius: 15px;}
			        html,body{height: 100%;margin: 0;}
			        .content{min-height: 100%;}
			        .container-con{padding-bottom: 230px;}
			        .con-left ,.con-right{margin-bottom: 30px;}
			
			        body{background: #f9f9f9;font-family: -apple-system,"Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;}
			        .content-card{margin: 25px 0;overflow: hidden;box-shadow: 0 0 10px 0 #eee;cursor: pointer;}
			        .content-card:hover{box-shadow: 0 0 14px #DCDCDC;}
			        .card-img img{width: 100%;transition-duration: .3s;transition-timing-function: ease-out;transition-delay}
			        .card-img img:hover {
			            transform: scale(1.2);
			            -webkit-transform: scale(1.2); /*Safari 和 Chrome*/
			            -moz-transform: scale(1.2); /*Firefox*/
			            -ms-transform: scale(1.2); /*IE9*/
			            -o-transform: scale(1.2); /*Opera*/
			        }
			        .card-footer{color: #bbb;height: 35px;padding: 0px 15px;}
			        .badge-normal{background-color: #f66e6e;margin-top: 3px;padding: 3px 11px;}
			        .badge-vip{background-color: #ffae0f;margin-top: 3px;padding: 3px 11px;}
			
			a:hover{text-decoration:none;}
        a.active{text-decoration:none;}
        html,body{height: 100%;margin: 0;}
        .row{margin-bottom: 10px}

        body{background: #f9f9f9;font-family: -apple-system,"Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;}
        @font-face {
            font-family: "lantingxihei";
            src: url("fonts/FZLTCXHJW.TTF");
        }

		/* 导航栏 */
		.header {
			background-color: #DEDEDE;
		}
		.container {
			padding-right: 40px;
			padding-left: 40px;
		}
		.navbar-nav{
			margin-left: 20px;
		}
		
        /* modal 模态框*/
        #invite-user .modal-body {
            overflow: hidden;
        }
        #invite-user .modal-body .form-label {
            margin-bottom: 16px;
            font-size:14px;
        }
        #invite-user .modal-body .form-invite {
            width: 80%;
            padding: 6px 12px;
            background-color: #eeeeee;
            border: 1px solid #cccccc;
            border-radius: 5px;
            float: left;
            margin-right: 10px;
        }
        #invite-user .modal-body .msg-modal-style {
            background-color: #7dd383;
            margin-top: 10px;
            padding: 6px 0;
            text-align: center;
            width: 100%;
        }
        #invite-user .modal-body .modal-flash {
            position: absolute;
            top: 53px;
            right: 74px;
            z-index: 999;
        }
        /* end modal */

        .en-footer {
            padding: 30px;
            text-align: center;
            font-size: 14px;
        }
		/* well */
		.panel {
			margin-bottom: 0px;
		}
		h3{
			display: inline-block;
		}
    </style>
	</head>
	<body>
		<jsp:include page="top.jsp"/>
		<div class="container layout layout-margin-top">
		
			<!--中心-->
			
			<div class="row">
			<c:forEach items="${requestScope.workList }" var="w" varStatus="status">
				<div style="margin-bottom:15px" class="col-md-4">
					<div class="layui-card cate-con">
						<div class="layui-card-body">
							<table class="table">
								<tbody>
									<tr>
										<h3>${w.workTitle}</h3>
										<button onclick="del(${w.workID})" type="button"  class="close" aria-label="Close">
										<span aria-hidden="true">&times;</span>
										</button>
									</tr>
									<tr>
										<td>开始时间：<span>${w.workBegin}</span></td>
									</tr>
									<tr>
										<td>结束时间：<span>${w.workEnd}</span></td>
									</tr>
									<tr>
										<td>任务小组：
											<span>
												<c:forEach items="${w.groupList}" var="g" varStatus="status">
												<c:out value="${g}" />、
												</c:forEach>
											</span>
										</td>
									</tr>
									<tr>
										<td>评价形式：<span>百分制</span></td>
									</tr>
								</tbody>
							</table>
							<div class="panel panel-success">
								<!-- Default panel contents -->
								<div class="panel-heading">
									<a href="#showContent${w.workID}" data-toggle="modal" class="layui-btn layui-btn-sm" id="">查看内容</a>
									<a  onclick="edit(${w.workID})" class="layui-btn layui-btn-sm" id="">编辑</a>
									<c:if test="${w.openEva eq true}">
										<a  onclick="openEva(${w.workID})" class="layui-btn layui-btn-sm" id="">评价</a>
									</c:if>
								</div>
							</div>
						</div>
					</div>
				</div>
				</c:forEach>
				<div class="col-md-4">
					<div class="layui-card content-card layui-anim layui-anim-scale">
						<div class="card-img" href="#addTask" data-toggle="modal" data-placement="bottom" title="添加任务"><img src="img/add.png"></div>
					</div>
				</div>
			</div>
			
			
		</div>
		<!--container-->
		<!-- 登陆模态框 -->
		<div class="modal fade" id="sign-modal" tabindex="-1" role="dialog">
			<div class="modal-dialog modal-sm" role="document">
				<div class="modal-content">
					<button type="button" class="close-modal" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<div class="modal-body">
						<ul class="nav nav-tabs" role="tablist">
							<li role="presentation" class="active">
								<a href="#signin-form" aria-controls="signin-form" role="tab" data-toggle="tab">登录</a>
							</li>
						</ul>
						<div class="tab-content">
							<div role="tabpanel" class="tab-pane active" id="signin-form">
								<form action="/login" method="post">
									<div class="form-group">
										<div class="input-group">
											<div class="input-group-addon">
												<i class="fa fa-envelope" style="margin:0;"></i>
											</div>
											<input type="email" name="login" class="form-control" placeholder="请输入账户">
										</div>
									</div>
									<div class="form-group">
										<div class="input-group">
											<div class="input-group-addon">
												<i class="fa fa-lock" style="margin:0;"></i>
											</div>
											<input type="password" name="password" class="form-control" placeholder="请输入密码">
										</div>
									</div>
									<div class="form-inline verify-code-item" style="display:none;">
										<div class="form-group">
											<div class="input-group">
												<input type="text" name="captcha_v" class="form-control" placeholder="请输入验证码">
											</div>
										</div>
										<img class="verify-code" src="" source="https://www.shiyanlou.com/captcha.gif">
									</div>
									<div class="form-group remember-login">
										<input name="remember" type="checkbox" value="y"> 下次自动登录
										<a class="pull-right" href="../reset_password/index.html">忘记密码？</a>
									</div>
									<div class="form-group">
										<input class="btn btn-primary" name="submit" type="submit" value="登录">
									</div>
									<div class="form-group error-msg">
										<div class="alert alert-danger" role="alert"></div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 登录模态框结束 -->
		<!-- 添加任务模态框 -->
		<div class="modal fade" id="addTask" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h3 class="modal-title" id="gridSystemModalLabel">添加任务</h3>
					</div>
					<form class="form-horizontal" action="WorkInfoServlet" method="post">
					<input name="action" value="add" type="hidden">
						<div class="modal-body">
							<div class="form-group">
								<label for="taskName" class="col-sm-2 control-label">任务名称</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" name="workTitle" id="workTitle" placeholder="请输入任务名称">
								</div>
							</div>
							<div class="form-group">
								<label for="endTime" class="col-sm-2 control-label">结束时间</label>
								<div class="col-sm-10">
									<input type="datetime" class="form-control" name="endTime" id="endTime" placeholder="请选择结束时间">
								</div>
							</div>
							<div class="form-group">
								<label for="endTime" class="col-sm-2 control-label">任务小组</label>
								<div class="col-sm-10">
									<label class="checkbox-inline" style="display: inline-block;">
										<input type="checkbox" name="groupID" id="inlineCheckbox1" value="1"> 1
									</label>
									<label class="checkbox-inline" style="display: inline-block;">
										<input type="checkbox" name="groupID" id="inlineCheckbox2" value="2"> 2
									</label>
									<label class="checkbox-inline" style="display: inline-block;">
										<input type="checkbox" name="groupID" id="inlineCheckbox3" value="3"> 3
									</label>
									<label class="checkbox-inline" style="display: inline-block;">
										<input type="checkbox" name="groupID" id="inlineCheckbox4" value="4"> 4
									</label>
									<label class="checkbox-inline" style="display: inline-block;">
										<input type="checkbox" name="groupID" id="inlineCheckbox5" value="5"> 5
									</label>
									<label class="checkbox-inline" style="display: inline-block;">
										<input type="checkbox" name="groupID" id="inlineCheckbox6" value="6"> 6
									</label>
									<label class="checkbox-inline" style="display: inline-block;">
										<input type="checkbox" name="groupID" id="inlineCheckbox7" value="7"> 7
									</label>
									<label class="checkbox-inline" style="display: inline-block;">
										<input type="checkbox" name="groupID" id="inlineCheckbox8" value="8"> 8
									</label>
								</div>
							</div>
							<div class="form-group">
								<label for="endTime" class="col-sm-2 control-label">任务内容</label>
								<div class="col-sm-10">
									<div id="editor"></div>
								</div>
								<textarea name="workContent" id="ueditorContent" style="width:100%; height:200px;display:none" ></textarea>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="submit" class="btn btn-primary">提交</button>
						</div>
					</form>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		<!-- 添加任务模态框结束 -->
		<c:forEach items="${requestScope.workList }" var="w" varStatus="status">
		<!-- 任务内容 -->
		<div id="showContent${w.workID}" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
			<div class="modal-dialog modal-sm" role="document">
				<div class="modal-content">
				${w.workContent}
				</div>
			</div>
		</div>
		<!-- 任务内容结束 -->
		</c:forEach>
		<!-- 编辑任务模态框 -->
		<div class="modal fade" id="editTask" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h3 class="modal-title" id="gridSystemModalLabel">编辑任务</h3>
					</div>
					<form class="form-horizontal" action="WorkInfoServlet" method="post">
					<input name="action" value="edit" type="hidden">
					<input id="edit-workID" name="workID"  type="hidden">
						<div class="modal-body">
							<div class="form-group">
								<label for="taskName" class="col-sm-2 control-label">任务名称</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" name="workTitle" id="edit-workTitle" placeholder="请输入任务名称">
								</div>
							</div>
							<div class="form-group">
								<label for="endTime" class="col-sm-2 control-label">结束时间</label>
								<div class="col-sm-10">
									<input type="datetime" class="form-control" name="endTime" id="edit-endTime" placeholder="请选择结束时间">
								</div>
							</div>
							<div class="form-group">
								<label for="endTime" class="col-sm-2 control-label">任务小组</label>
								<div class="col-sm-10">
									<label class="checkbox-inline" style="display: inline-block;">
										<input type="checkbox" name="groupID" id="edit-inlineCheckbox1" value="1"> 1
									</label>
									<label class="checkbox-inline" style="display: inline-block;">
										<input type="checkbox" name="groupID" id="edit-inlineCheckbox2" value="2"> 2
									</label>
									<label class="checkbox-inline" style="display: inline-block;">
										<input type="checkbox" name="groupID" id="edit-inlineCheckbox3" value="3"> 3
									</label>
									<label class="checkbox-inline" style="display: inline-block;">
										<input type="checkbox" name="groupID" id="edit-inlineCheckbox4" value="4"> 4
									</label>
									<label class="checkbox-inline" style="display: inline-block;">
										<input type="checkbox" name="groupID" id="edit-inlineCheckbox5" value="5"> 5
									</label>
									<label class="checkbox-inline" style="display: inline-block;">
										<input type="checkbox" name="groupID" id="edit-inlineCheckbox6" value="6"> 6
									</label>
									<label class="checkbox-inline" style="display: inline-block;">
										<input type="checkbox" name="groupID" id="edit-inlineCheckbox7" value="7"> 7
									</label>
									<label class="checkbox-inline" style="display: inline-block;">
										<input type="checkbox" name="groupID" id="edit-inlineCheckbox8" value="8"> 8
									</label>
								</div>
							</div>
							<div class="form-group">
								<label for="endTime" class="col-sm-2 control-label">任务内容</label>
								<div class="col-sm-10">
									<div id="editor2"></div>
								</div>
								<textarea name="workContent" id="ueditorContent2" style="width:100%; height:200px;display:none" ></textarea>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="submit" class="btn btn-primary">提交</button>
						</div>
					</form>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		<!-- 编辑任务模态框结束 -->
		
		<!-- 评价模态框 -->
		<div class="modal fade" id="openEva" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h3 class="modal-title" id="gridSystemModalLabel">任务评价</h3>
					</div>
					<form class="form-horizontal" action="EvaluateInfoServlet" method="post">
					<input name="action" value="eva" type="hidden">
					
						<div class="modal-body">
							<div class="form-group eva-div">

							</div>
							
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="submit" class="btn btn-primary">提交</button>
						</div>
					</form>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		<!-- 评价模态框结束 -->
		<!-- 删除提示 -->
		<div id="delWork" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  			<div class="modal-dialog modal-sm" role="document">
    			<div class="modal-content">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title">删除任务</h4>
		        <div class="modal-body">
		        	<p>确认要删除该任务吗?</p>
		        </div>
		        <div class="modal-footer">
		        <form action="WorkInfoServlet" method="post">
		        	<input type="hidden" name="action" value="del">
		        	<input id="delworkID" type="hidden" name="workID">
		        	<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        	<button type="submit" class="btn btn-primary">确认删除</button>
		        </form>
		        </div>
		        
		    	</div><!-- /.modal-content -->
		  	</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		<!-- 删除提示结束 -->
		<jsp:include page="footer.jsp"/>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/layui.all.js"></script>
<script src="release/wangEditor.js"></script>
<script src="laydate.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
var $ueditorContent = $('#ueditorContent')
editor.customConfig.uploadImgShowBase64 = true
editor.customConfig.uploadFileName = 'myFile'
editor.customConfig.uploadImgServer = '/WEB_GROUP/ImageUploadServlet'
// 或者 var editor = new E( document.getElementById('editor') )
editor.customConfig.onchange = function (html) {
    // 监控变化，同步更新到 textarea
    $ueditorContent.val(html)
};
editor.create()
$ueditorContent.val(editor.txt.html())


var editor2 = new E('#editor2')
var $ueditorContent2 = $('#ueditorContent2')
editor2.customConfig.uploadImgShowBase64 = true
editor2.customConfig.uploadFileName = 'myFile'
editor2.customConfig.uploadImgServer = '/WEB_GROUP/ImageUploadServlet'
editor2.customConfig.onchange = function (html) {
    // 监控变化，同步更新到 textarea
    $ueditorContent2.val(html)
};
editor2.create()
$ueditorContent2.val(editor2.txt.html())
	
layui.use('laydate', function(){
	var laydate = layui.laydate;
	laydate.render({
	elem: '#endTime' //指定元素
	,type: 'datetime'
	});
	laydate.render({
		elem: '#edit-endTime' //指定元素
		,type: 'datetime'
		});
});

function del(workID){
	$("#delworkID").attr("value",workID);
	$("#delWork").modal("show");
};



function edit(workID){
	$.ajax({
        url: "WorkInfoServlet",
        type: "POST",
        dataType:"JSON",
        data: {
			action:"getInfo",
			workID:workID
        },
        success: function (data) {
        	$('#editTask input:checkbox').each(function() { 
    		    	$(this).attr('checked', false); 
    		});
        	$("#edit-workTitle").attr("value",data.workTitle);
        	$("#edit-endTime").attr("value",data.workEnd);
        	$("#edit-workID").attr("value",data.workID);
        	$(".w-e-text").html(data.workContent);
        	$("#ueditorContent2").val(data.workContent);
        	$.each(data.groupList, function(index, item) {
        		$('#editTask input:checkbox').each(function() { 
        		    if ($(this).attr('value') == item) { 
        		    	$(this).attr('checked', true); 
        		    } 
        		});
	        });
        	$("#editTask").modal("show");
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown);
        }
	});
};

function openEva(workID){
	$.ajax({
        url: "EvaluateInfoServlet",
        type: "POST",
        dataType:"JSON",
        data: {
			action:"info",
			workID:workID
        },
        success: function (data) {
        	$(".eva-div div").remove();
        	$.each(data, function(index, item) {
        		if(item.evaluateContent == null) item.evaluateContent = "请填入评价";
        		if(item.evaluateDegree == null) item.evaluateDegree = "请填入成绩";
        		$(".eva-div").append(
        				"<div class='row'>"
        					+"<input id='' name='evaluateID' value="+item.evaluateID+" type='hidden'>"
							+"<label class='col-sm-2' style='padding-left:45px;line-height:35px' id='eva-groupName' for='groupName' class='col-sm-2 control-label'>"+item.groupName+"：</label>"
							+"<div class='col-sm-7'>"
								+"<input type='text' class='form-control' value="+item.evaluateContent+" name='evaluateContent' id='eva-cont' placeholder='请输入评价内容'>"
							+"</div>"
							+"<div class='col-sm-3'>"
								+"<input type='text' class='form-control' value="+item.evaluateDegree+" name='evaluateDegree' id='eva-degree' placeholder=''>"
							+"</div>"
						+"</div>"
				)
        		
        		
	        });
        	$("#openEva").modal("show");
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown);
        }
	});
};

/* $("#editTask").on('shown.bs.modal',function(e) {
	alert(1);
    //get data-id attribute of the clicked element
    var workid = $(e.relatedTarget).data('workid');
    $.ajax({
        url: "WorkInfoServlet",
        type: "POST",
        dataType:"JSON",
        data: {
			action:"getInfo",
			workID:workid
        },
        success: function (data) {
            $.each(data.w, function(index, item) {
            	$(e.currentTarget).find('input[name="workTitle"]').val(w.workTitle);
            	$(e.currentTarget).find('input[name="endTime"]').val(w.workEnd);
            	$(e.currentTarget).find('div[id="editor2"]').val(w.workEnd);
	        });
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown);
        }

    });
}); */
</script>
</body>
</html>
